<template>
	<view>
		<view class="input-wrap">
			<input class="input" placeholder="请输入手机号码" v-model="phone" placeholder-class="input-phl" confirm-type="search" @confirm="search" @focus="focus">
		</view>

		<view class="friends-item" v-if="searchResult">
			<image class="friends-avatar" :src="getImgUrl(searchResult.avatar)"></image>
			<text class="friends-name">{{searchResult.nickName}}</text>
			<view class="apply-btn" @tap="toSendAddFriendApply">添加好友</view>
		</view>

		<view class="noresult-tips" v-show="noSearchResult">
			<view class="tips-text">未找到 {{phone}} 的用户，是否需要发送短信邀请？</view>
			<view class="tips-btn" @tap="sendMessageToNewUser">发送短信</view>
		</view>

		<alertPop :title="'提示'" :content="'请注意接收添加通知'" :btnText="'我知道了'" @btnClk="closeApplySendTips" v-show="applySendTipsShow"></alertPop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				searchResult: null,
				noSearchResult: false,
				applySendTipsShow: false
			}
		},
		methods: {
			focus() {
				this.searchResult = null
				this.noSearchResult = false
			},
			search() {
				// if (/^1\d{10}$/.test(this.phone)) {
					this.$api.getUserInfoByPhone(this.phone).then(res => {
						this.searchResult = res
					}).catch(() => {
						this.noSearchResult = true
					})
				// } else {
				// 	uni.showToast({
				// 		title: '请输入正确的手机号',
				// 		icon: 'none'
				// 	})
				// }
			},
			toSendAddFriendApply() {
				const currentUserInfo = this.$store.state.userInfo
				const data = {
					fromUserId: currentUserInfo.id,
					fromType: "手机号搜索",
					fromDesc: `通过手机号搜索添加，请确认对方身份`,
					fromRemark: `${currentUserInfo.nickName}请求添加您为好友`,
					toUserId: this.searchResult.id
				}
				this.$api.sendAddFriendApply(data).then(() => {
					uni.showToast({
						title: '好友请求已发送',
						icon: 'none'
					})
				}).catch(()=>{
					uni.showToast({
						title: '好友请求失败或已发送过好友申请',
						icon: 'none'
					})
				})
			},
			sendMessageToNewUser(){
				uni.showLoading({ mask: true });
				this.$api.sendMessageToNewUser({
					toPhone:this.phone
				}).then(()=>{
					this.applySendTipsShow = true
				})
			},
			closeApplySendTips(){
				this.applySendTipsShow = false
			}
		}
	}
</script>

<style lang="less">
	.input-wrap {
		width: 690rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin: 20rpx auto;
		border-bottom: 2rpx solid #EEEEEE;

		.input {
			font-size: 32rpx;
			font-weight: 400;
			color: #666;
			line-height: 44rpx;
		}

		.input-phl {
			color: #BCC2CE;
		}
	}

	.friends-item {
		width: 650rpx;
		margin: 10rpx auto;
		height: 128rpx;
		display: flex;
		align-items: center;
		position: relative;

		.friends-avatar {
			width: 98rpx;
			height: 98rpx;
			border-radius: 50%;
		}

		.friends-name {
			margin-left: 20rpx;
			font-size: 36rpx;
			color: #333;
			line-height: 50rpx;
		}

		.apply-btn {
			position: absolute;
			right: 20rpx;
			top: 35rpx;
			height: 58rpx;
			width: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #3399FF;
			border-radius: 6rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 58rpx;

		}
	}

	.noresult-tips {
		width: 690rpx;
		margin: 10rpx auto;
		display: flex;
		flex-direction: column;
		align-items: center;

		.tips-text {
			font-size: 32rpx;
			font-weight: 400;
			color: #999;
			line-height: 44rpx;
		}

		.tips-btn {
			margin-top: 110rpx;
			height: 76rpx;
			width: 232rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #3399FF;
			border-radius: 6rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 40rpx;
		}
	}
</style>
